import React, { Component } from 'react';

// 修改数据的另一种方式
// 语法1:  this.setState({key:value})
// 语法2: this.setState((state)=>return{key:value},()=>{})


// 比较setState()修改数据的两种方式
// setState({}) 和setState(()=>{reuturn{key:value}})
// 注意: 当同时执行多个setSatte 的时候, 如果参数为对象格式,那么react 会将这些对象进行合并, 由于合并时,对象
// 的参数的key都一样, 会导致 后面key 覆盖前面的key,从而导致只有最后的一个key 起作用
// 当参数为函数的时候, react 会将这些函数放在一个数组中,然后循环执行,这样意味着所有的修改操作都执行了,所有最终累加

class Mine extends Component {
    state = {
        count: 100,
        username: '小红'
    }

    render() {
        return (
            <div>
                <p onClick={this.addCount.bind(this)}>{this.state.count}</p>
            </div>
        );
    }
    addCount() {
        // this.setState((state) => {
        //     // console.log(state);
        //     return {
        //         count: state.count + 1
        //     }
        // })
        // this.setState((state) => {
        //     // console.log(state);
        //     return {
        //         count: state.count + 1
        //     }
        // })
        // this.setState({
        //     count: this.state.count + 1
        // })
        this.setState({
            count: this.state.count + 1,
            age: 20
        })


    }

}

export default Mine;
